<template>
  <div class="box">
  <el-dialog
    draggable
    :model-value="dialogVisible"
    title="流程图"
    width="80%"
    @close="close"
  >
    <template #header>
      <div class="header">流程图</div>
    </template>
    <div class="explain" >
      <div class="explain_mode" v-for="(item, i) in colorArray" :key="i">
        <span class="box" :style="{ 'background-color': item.color }"></span>
        {{ item.title }}
      </div>
    </div>
    <section>
      <div class="flow flex" v-for="(mode, m) in options" :key="m">
        <div class="mode flex"  v-for="(item, i) in mode" :key="i">
          <aside style="position: relative;width: 130px" >
            <span
              v-if=" item.status !=1"
              class="title"
              :class="{
                end: item.type == 'end',
                  green:  item.status <= orderStatus && disableGreenTerm(item.status),
                  brown: item.type == 'end',
                  radius: item.radius,
                  green1: orderStatus==25 && !disableGreenTerm(item.status),
              }"
            >
              {{ item.title }}
            </span>
            <!-- 下 -->
            <b v-if="item.line" class="line-down" :class="item.line"></b>
            <img
              v-if=" item.status <= orderStatus && item.status !=1 && disableGreenTerm(item.status)"
              class="activeIcon"
              :src="`https://dc-app-oss.oss-cn-zhangjiakou.aliyuncs.com/dms/image/active.png`"
              alt=""
            />
            <img
              v-if="orderStatus==25 && !disableGreenTerm(item.status)"
              class="activeIcon"
              :src="`https://dc-app-oss.oss-cn-zhangjiakou.aliyuncs.com/dms/image/active.png`"
              alt=""
            />
          </aside>
          <span v-if=" item.type !='null'">
          <!-- 右 -->
          <b
            v-if="i < mode.length - 1 && item.type != 'right-up' && item.type != 'left-up'"
            class="line-right"
          ></b>
            <!-- 左-->
          <b
            v-if="item.type == 'left-up'"
            class="line-left"
            :class="item.line"
          ></b>
            <!-- 右上 -->
          <div v-show="item.type == 'right-up'" class="line-right-up">
            <span class="right"></span>
            <span class="up"></span>
          </div>
          </span>
        </div>
      </div>
      <div class="explain">
      </div>
    </section>
    <template #footer>
      <div class="flex_center">
        <vab-button
          title="知道了"
          type="primary"
          size="default"
          @click="close"
        />
      </div>
    </template>
  </el-dialog>
  </div>
</template>
<script lang="ts" setup>

/**
 * @vab
 */

const dialogVisible = ref(false)
const orderStatus = ref(0)
const colorArray = [
  { color: '#228b22', title: '已完成节点' },
  { color: '#c0c0c0', title: '未完成节点' },
  // { color: '#4e88f3', title: '已完成节点(卖方节点)' },
  // { color: '#696969', title: '已结束节点' },
]

/**
 * @param{
 *  title: '名称',
 *  status : '唯一标识',
 *  type: '类型',
 *  line: '线条类型'
 * }
 */
const options = ref<any>([
  [
    {
      title: '开始',
      status: -1,
      type: '',
      radius:true
    },
    {
      title: '订单创建',
      status: -2,
      type: ' ',
      line: 'solid',
    },
    {
      title: '已审核',
      status: 20,
      type: '',
      line: 'dashed',
    },
    {
      title: '已出库',
      status: 80,
      type: '',
    },
    { title: '已发出', status: 90, type: '' },
    {
      title: '结束',
      radius:true,
      status: 100,
      type: '',
    },
  ],
  [
    {
      title: ' ',
      status: 1,
      type: 'null',
    },
    // { title: '结束', status: 300, type: 'end' },
    // { title: '', status: 1, type: 'null' },
    { title: '存为草稿', status: 0, type: 'right-up', },
    { title: '已取消', status: 25, type: 'null',radius:true },
  ],
])
/**
 * @method
 */
const close = () => {
  dialogVisible.value = false
}
const open = (status = 0) => {
  dialogVisible.value = true
  orderStatus.value = status
}

// 禁用完成条件
const disableGreenTerm = (status = 0) => {
  if ( status !=25) return true
  return false
}
// 禁用未完成条件
const disableGreyTerm = (status = 0) => {
  if (orderStatus.value >= 30 && orderStatus.value <= 100 && status == 300)
    return false
  return true
}
// 禁用end条件
const disableBrownTerm = (status = 0) => {
  if (orderStatus.value == 100 && status == 100) return true
  if (orderStatus.value == 25 && status == 25) return true
  if (orderStatus.value == 45 && status == 45) return true
  return false
}

/**
 * @实例
 */
defineExpose({
  close,
  open,
})
</script>

<style lang="scss" scoped>
.box {
  :deep() {
    .el-dialog__header {
      border-bottom: 1px solid #e9e9e9;
      margin-right: 0px;
      padding: 12px 24px;

    }
    .el-dialog__headerbtn {
      top: 0;
    }
    .el-dialog__body {
      padding: 17px 24px;
    }
  }
  .header {
    height: 24px;
    font-family: PingFangSC-Medium;
    font-weight: 600;
    font-size: 16px;
    color: #1d2129;
    letter-spacing: 0;
    line-height: 24px;
  }
}

section {
  overflow-y: auto;
  padding: 20px 0px;
}
.flow {
  margin-bottom: 80px;
  &:last-child {
    margin-bottom: 0px;
    justify-content: flex-end;
  }
  .mode {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 10px;
    margin-right: 50px;
    border-radius: 2px;

    &:first-child {
      margin-left: 0px;
    }
    &:last-child {
      margin-right: 0px;
    }
    cursor: auto;

    .activeIcon {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 16px;
      height: 16px;
      z-index: 11;
    }
    .title {
      padding: 11px 20px;
      font-family: PingFangSC-Medium;
      font-weight: 600;
      font-size: 14px;
      color: #8c8c8c;
      text-align: center;
      white-space: nowrap;
      display: flex;
      align-items: center;
      line-height: 20px;
      justify-content: center;
      position: relative;
      background: #f0f0f0;
      border-radius: 4px;

      &.radius {
        border-radius: 21px;
      }

      // 开始
      &.start {
        border-radius: 20px;
      }
      &.end {
        border-radius: 20px;
        background: #f0f0f0;
        border-radius: 4px;
      }
      // 褐色
      &.brown {
        border-radius: 20px;
        background-color: #696969 !important;
      }
      // 未进行
      &.grey {
        background: #f0f0f0;
        border-radius: 4px;
      }
      // 当前完成项
      &.active {
        background-color: #4e88f3;
      }
      // 已完成项
      &.green {
        background: #c9f5d396;
        color: #149c4a;
      }
      // 已完成项
      &.green1 {
        background: #c9f5d396;
        color: #149c4a;
      }
    }
    .line-right {
      font-style: normal;
      border-top: 1px solid #99e8ae;
      width: 50px;
      height: 1px;
      position: absolute;
      top: 50%;
      right: -51px;
      &::after {
        content: '';
        position: absolute;
        top: -6.5px;
        right: -6px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px 0 6px 6px;
        border-color: transparent transparent transparent #99e8ae;
      }
    }
    .line-left {
      font-style: normal;
      border-top: 1px solid #99e8ae;
      width: 50px;
      height: 1px;
      position: absolute;
      top: 50%;
      left: -51px;
      &::before {
        content: '';
        position: absolute;
        top: -6.5px;
        left: -6px;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-right: 6px solid #99e8ae;
        border-bottom: 6px solid transparent;
      }
    }
    .line-down {
      font-style: normal;
      border-left: 1px solid #99e8ae;
      width: 10px;
      height: 60px;
      position: absolute;
      top: 48px;
      left: 50%;
      &::after {
        content: '';
        position: absolute;
        bottom: -6.5px;
        left: -6px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px 6px 0 6px;
        border-color: #99e8ae transparent transparent transparent;
      }
      &.solid {
        border-left: 1px solid #99e8ae;
      }
      &.dashed {
        border-left: 1px dashed #99e8ae;
      }
    }
    .line-not {
      display: none;
    }

    .line-right-up {
      position: static;
      .right {
        position: absolute;
        top: 50%;
        right: -28px;
        border-top: 1px solid #99e8ae;
        width: 27px;
        height: 1px;
      }
      .up {
        position: absolute;
        top: -98px;
        right: -28px;
        border-left: 1px solid #99e8ae;
        width: 1px;
        height: 120px;
      }
    }

    .line-max {
      font-style: normal;
      border-left: 1px solid #99e8ae;
      width: 10px;
      height: 181px;
      position: absolute;
      top: 48px;
      left: 79%;
      &::after {
        content: '';
        position: absolute;
        bottom: -6.5px;
        left: -7px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px 6px 0 6px;
        border-color: #99e8ae transparent transparent transparent;
      }
      &.solid {
        border-left: 1px solid #99e8ae;
      }
      &.dashed {
        border-left: 1px dashed #99e8ae;
      }
    }
  }
}

aside {
  span {
    cursor: pointer;
  }
}
section {
  position: relative;
  .explain {
    display: flex;
    justify-content: flex-end;
    .explain_mode {
      display: flex;
      align-items: center;
      // margin-bottom: 12px;
      height: 20px;
      font-family: PingFangSC-Regular;
      font-weight: 500;
      font-size: 12px;
      color: #1d2129;
      letter-spacing: 0;
      line-height: 20px;
      margin-right: 16px;
      &:last-child {
        margin-right: 0px;
      }
      .box {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #f0f0f0;
        margin-right: 4px;
      }
    }
  }
}
</style>
